<template>
    <div class="layout-default">
        <layout-account />
        <layout-header/>
        <div class="flex flex-1 overflow-hidden">
            <layout-aside />
            <div class="layout-main">
                <slot></slot>
            </div>
        </div>

        <widgets-bulletin />
        <support-index />
    </div>
</template>

<script setup lang="ts">
import LayoutAside from './components/Aside/index.vue'
import LayoutHeader from './components/Header/index.vue'
import LayoutAccount from './components/Account/index.vue'
import SupportIndex from './components/Support/index.vue'
import WidgetsBulletin from './components/Widgets/Bulletin.vue'
</script>

<style lang="scss" scoped>
.layout-default {
    display: flex;
    flex-direction: column;
    min-width: 1200px;
    height: 100vh;
    background-color: var(--el-bg-color);
    .layout-main {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 15px;
        overflow: auto;
        background-color: var(--el-bg-color-page);
        border-top: 1px solid var(--el-border-color-light);
        border-left: 1px solid var(--el-border-color-light);
        border-top-left-radius: 12px;
    }
}
</style>
